<template>
  <div>
    <div class="filter-item">
      <el-form label-width="100px">
        <el-form-item label="日期：">
          <el-date-picker
            v-model="dateRange"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :editable="false"
            class="filter-item"
            @change="changeDate"
          /></el-form-item>
      </el-form>
    </div>
    <div class="filter-item">
      <el-form label-width="100px">
        <el-form-item label="所属企业："><yhxx ref="yhxxForm" @change="changeYhxx(arguments)" /></el-form-item>
      </el-form>
    </div>
    <div class="filter-item">
      <el-form label-width="100px">
        <el-form-item label="线路："><xl ref="xlForm" @change="changeXl(arguments)" /></el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import Yhxx from '@/views/database/yhxx.vue';
import Xl from '@/views/database/xl.vue';

export default {
  name: 'Search',
  components: { Yhxx, Xl },
  props: {
    start: {
      type: String,
      default: ''
    },
    end: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dateRange: []
    };
  },
  mounted() {
    if (this.start !== '' && this.start !== null) {
      this.dateRange.push(this.start);
    }
    if (this.end !== '' && this.end !== null) {
      this.dateRange.push(this.end);
    }
  },
  methods: {
    changeYhxx(data) {
      this.$emit('change', 'Yhxx', data[0]);
    },
    changeXl(data) {
      this.$emit('change', 'Xl', data[0]);
    },
    changeDate(data) {
      if (data) {
        this.$emit('change', 'Rq', data[0] + '~' + data[1]);
      } else {
        this.$emit('change', 'Rq', '');
      }
    }
  }
};
</script>
